<template>
	<div class="container">
	<van-nav-bar
	  left-arrow
	  @click-left="onClickLeft"
	  :border="false"
	>		
	  <van-icon name="arrow-left" slot="left" color="#000" size="20"/>
	  <div slot="title" class="weight_header" style="font-size: 16px;">账单明细</div>
    </van-nav-bar>	
    
    
	    
	<div class="noData" v-if="showNoData">
	   	<img src="../../../../static/img/lanhu/noData.png" alt="" />
	</div>    
	<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
	  <van-list
	    v-model="loading"
	    :finished="finished"
	    :finished-text="finishedText"
	    @load="onLoad"
	    :immediate-check="false"
	    :style="{minHeight: clientHeight + 'px' }"
	  >
	     <div class="wrap">	     	
	     	<div class="section_wrap" v-for="(item,index) in list" :key="index">
	     		<div class="section">
	     			<div class="section1">
	     				<div class="word1">{{item.type}}(订单编号:{{item.ordersSn}})</div>
	     				<div class="word3" v-if="item.type=='订单退回' ">退款成功将收取1%"退款手续费"</div>
	     				<div class="word2">{{item.payTime}}</div>
	     			</div>
	     			<div class="section2" :class="{active:item.moneys>0}">{{formatMoney(item.moneys)}}</div>
	     		</div>
	     	</div>
	     </div>
	  </van-list>
	</van-pull-refresh> 		
		       
	</div>	
</template>

<script>
import {getFun} from '@/api/publicFun.js'	 
let publicFun=getFun()	
export default {	
	data() {
       return {
       	  loading: false,    // 是否处于数据加载状态 
	      finished: false,   // 是否处于数据最底部的状态 
	      refreshing: false, // 是否处于下拉刷新状态         
          pageNum:1,         // 当前数据的页码数
          pages:0,           // 储存数据的最大页码数
          list:[],            // 储存数据用
          url1:this.$api+'/marketorderservice/api/v1/market/selectUserCashOutLogByUserId',
          showNoData:false, // 是否显示暂无数据,
          finishedText:''
       }
	},
	methods: {
	   // 转化钱
	   formatMoney(num){
	   	 if(num>=0){
	   	 	return '+' +num.toFixed(2)
	   	 }else{
	   	 	return num.toFixed(2)
	   	 }
	   },
	   // 下拉刷新函数	
	   onRefresh() {
		  setTimeout(() => {
	          this.pageNum=1
	          this.list=[]	          	
	          this.finished = true;
	          this.loading=false
			  this.refreshing = false;
			  this.getData()
		  }, 1000);          
	   },
	   // 上拉加载函数
	   onLoad(){	   	 
		 setTimeout(() => {		 	
	        if (this.refreshing) {
	          this.list = [];
	          this.refreshing = false;
	        }	
	        this.getData()
	      }, 1000);   	
	   },		
       // 获取数据
       getData(){
       	    let that=this
		    this.$Axios.postRequest(this.url1,{userId:this.userId},{pageNum:this.pageNum,pageSize:'10'})
		    .then(function(res) {	
			  	if(res.data.page.total==0){
			  		that.showNoData=true
			  		return false
			  	}		    	
			  	that.list=that.list.concat(res.data.page.records)
	            if(that.pageNum>=res.data.page.pages){
	            	that.finishedText='我也是有底线的' 
	            	that.finished = true;
	            	return false
	            }
	            else{	
		           that.pageNum++   //  下一次请求的时候页码加1	             	
		           that.loading = false;   // 关闭加载中
		           that.finished = false;  // 数据加载未完成	                       	
               }			  	
		    })       	
       }
	},
	mixins:[publicFun],	
	mounted() {
	    this.userId=this.$router.currentRoute.query.userId;
		this.getData()
	}
}	
</script>

<style scoped="" lang="scss">
*{font-size: 14px;color: #333;font-weight: 500;}
.container{position: absolute;left: 0;top: 0;background: #f8f8f8;min-height: 100%;width: 100%;}
.wrap{margin-top: 5px;background: #fff;}
.section_wrap{padding: 0 15px;}
.section{padding: 15px 0;border-bottom: 1px solid #f0f0f0;display: flex;}
.section1{width: 80%;}
.section2{flex: 1;display: flex;align-items: center;justify-content: center;color: #333;font-size: 13px;font-weight: 500;}
.section2.active{color: #F22613}
.word1{font-size: 12px;color: #999;}
.word2{font-size: 12px;color: #999;margin-top: 15px;}
.word3{font-size: 12px;color: #F22613;margin-top: 15px;}
</style>